<!--
 * @Author: szx
 * @Date: 2022-06-08 14:02:35
 * @LastEditTime: 2022-06-08 14:13:53
 * @Description: 
 * @FilePath: \learn\HTML\按钮\涟漪特效按钮\index.html
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涟漪特效按钮</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="btn-box">
        <button>点赞</button>
        <button>关注</button>
        <button>收藏</button>
        <button>投币</button>
    </div>
    <script>
        const btns = document.querySelectorAll('button')
        btns.forEach((btn) => {
            btn.addEventListener('click', (e) => {
                let span = document.createElement('span')
                span.style.left = e.offsetX + 'px'
                span.style.top = e.offsetY + 'px'
                btn.appendChild(span)
                setTimeout(() => {
                    span.remove();
                }, 1000)
            })
        })
    </script>
</body>

</html>